<template>
    <div class="findpage">
        <div class="findcity">
            <input type="text" placeholder="输入城市名">
        </div>
       <p class="city">
           <strong>{{city}}</strong>
           <span>当前选择城市</span>
           <i class="iconfont">√</i>
       </p>
       <div class="hotcity">
            <h3 class="hotcitytitle">热门城市</h3>
            <ul class="hotcitylist">
                <li @click="chooseCity()">北京市</li>
                <li>上海市</li>
                <li>长沙市</li>
                <li>广州市</li>
                <li>深圳市</li>
            </ul>
       </div>
       <div class="hotcity">
            <h3 class="hotcitytitle">热门城市</h3>
            <ul class="hotcityList">
                <li class="hotcitytitle" v-for="item in data" @click="chooseCity(item)">{{item}}</li>
               
            </ul>
       </div>
    </div>
</template>

<script>
export default {
      data () {
            return {
                data:["北京市","上海市","长沙市","广州市","深圳市","郑州市"],
                city:localStorage.getItem("city")
            }
    },
    methods:{
        chooseCity(item){
            console.log(item)
            localStorage.setItem("city",item);
            this.$router.go(-1)

        }
    }
}
</script>

<style lang="less" scoped>
.findpage{
    width: 100%;
    height: 100%;
    background: #f6f6f6;
}
.hotcity{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0 .33rem;
    margin-top: .38rem;
    padding-bottom: .3rem;
    .hotcitylist{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        li{
            width: 2.06rem;
            height: .84rem;
            line-height: .84rem;
            text-align: center;
            margin: .17rem .2rem;
            color: #80684e;
            border: .02rem solid #80684e;
            border-radius: .44rem;
        }
    }
}
.hotcitytitle{
    height: 1.05rem;
    line-height: 1.05rem;
    border-bottom: .01rem solid #ccc;
}
.city{
    display: flex;
    flex-direction: row;
    strong{
        margin-left: 2%;
        font-size: .39rem;
    }
    span{
        flex: 1;
        margin-left: 1rem;
    }
    i{
        margin-right: 2%;
    }
}
    .findcity{
        width: 100%;
        height: 1.5rem;
        display: flex;
        align-items: center;
        input{
            display: inline-block;
            width: 94%;
            margin-left: 2%;
            border: .01rem solid #ccc;
            height: .93rem;
            border-radius: .54rem;
            text-indent: 2em;
            background: #f6f6f6;
        }
    }
    .van-tabs__line{
        
    }
</style>
